<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

       .container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

       .form-group {
            margin-bottom: 15px;
        }

       .form-group label {
            display: block;
            margin-bottom: 5px;
        }

       .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

       .btn {
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

       .btn:hover {
            background-color: #0056b3;
        }

       .error {
            color: red;
        }

       .user-info {
            margin-top: 20px;
        }

       .user-info p {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>登录</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="text" id="email" name="email" required>
                <span class="error" id="emailError"></span>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
                <span class="error" id="passwordError"></span>
            </div>
            <button type="submit" class="btn">登录</button>
        </form>
        <div class="user-info" id="userInfo"></div>
    </div>
    <script>
        let msg= [{
            name: '张三',
            age: 20,
            strengths: 'JavaScript',
            avatar: 'tx3.png',
            email: 'yunding@qq.com',
            password: 33333
        },
        {
            name: '李四',
            age: 19,
            strengths: 'python',
            avatar:'tx1.png',
            email: '12345678@163.com',
            password: 11111
        },
        {
            name: '王五',
            age: 18,
            strengths: 'Java',
            avatar: 'tx2.png',
            email: 'yundingshuyuan@qq.com',
            password: 222222
        },
        ];

        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault();
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const emailError = document.getElementById('emailError');
            const passwordError = document.getElementById('passwordError');
            const userInfo = document.getElementById('userInfo');

            emailError.textContent = '';
            passwordError.textContent = '';
            userInfo.innerHTML = '';

            const emailRegex = /^(qq|163)\.[a-zA-Z]{2,}$/;//^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
            if (!emailRegex.test(email)) {
                emailError.textContent = '请输入合法的邮箱';
                return;
            }

            const user = msg.find(u => u.email === msg.email && u.password === parseInt(password));
            if (user)
             {
                userInfoinnerHTML = `
                <p>姓名: ${user.name}</p>
                <p>年龄: ${user.age}</p>
                <p>特长: ${user.strengths}</p>
                <p>头像: <img src="${user.avatar}" alt="${user.name}" width="100"></p>
                <p>邮箱: ${user.email}</p>
            `};
             else {
                passwordError.textContent = '邮箱或密码错误';
                return;  }
            userInfo.innerHTML = userInfoHTML; });
    </script>
</body>

</html>